<template>
	<div>
		<h1>Vuex_A组件</h1>
		{{ num }}===>{{ total }} {{ userInfo }}
		<button @click="btn">修改num值</button>
		<button @click="info_btn">修改info值</button>

		<B></B>
	</div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
let store = useStore();
let num = computed(() => store.state.num); //加了computed才是响应式的
let total = computed(() => store.getters.total); //加了computed才是响应式的

const btn = () => {
	store.commit('changeNum', 300); //定义mutations方法就用commit
	store.dispatch('changeBtn'); //定义actions方法,就用dispatch
};

//modules模块
console.log(store.state.user.userInfo); //modules:{user}
let userInfo = computed(() => store.state.user.userInfo);
const info_btn = () => {
	store.commit('user/changeInfo'); //定义mutations方法就用commit
};
</script>

<style></style>
